<template>
	<view class="container">
		<view class="card">
			<view class="title flex-row"><view class="name">培训信息</view></view>
			<!--培训信息-->
			<view class="item"><view>培训主题：{{ form.topic }}</view></view>
			<view class="item"><view>培训讲师：{{ form.teacher }}</view></view>
			<view class="item"><view>培训内容：{{ form.title || '无' }}</view></view>
			<!--培训内容-->
			<view class="title flex-row"><view class="name">培训内容列表</view></view>
			<view v-for="(item, index) in form.content" :key="item" class="card list flex-row">
				<view class="order">{{ index+1 }}</view>
				<view class="content">{{ item }}</view>
			</view>
			<!--学员列表-->
			<view class="title flex-row"><view class="name">学员列表</view></view>
			<view v-for="(item, index) in form.study_man" :key="item" class="card member flex-row">
				<view>{{ index+1 }}、姓名：{{ item.name }}</view>
			</view>
			<!--培训签字-->
			<view class="title flex-row"><view class="name">培训签字<text class="require">*</text></view></view>
			<image v-if="sign_url" class="sign-image" :src="sign_url" mode="aspectFill"></image>
			<view v-if="form.status != 2 && !sign_url && !isCreate" class="btn" @click="showSign">点击签字</view>
			
			<!--签名弹出-->
			<uni-popup ref="popup" type="bottom" @change="toggleSign">
				<view class="popup-outter">
					<view class="popup-inner">
						<view class="popup-title">
							<text>签名</text>
							<view @click="clearClick" class="flex-row">
								<image src="../../../../static/img/grid/clear.png" mode=""></image>
								<text>清除</text>
							</view>
						</view>
						<canvas
							canvas-id="firstCanvas" 
							disable-scroll='true' 
							@touchmove='move' 
							@touchstart='start($event)' 
							@touchend='end' 
							@touchcancel='cancel' 
							@longtap='tap' 
							@error='error'>
						</canvas>
						<view class="btns flex-row">
							<view @click="hideSign">返回看看</view>
							<view @click="overSign">签名</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view v-if="form.status != 2 && sign_url" @click="finish" class="btn">完成学习</view>
		<view v-if="form.status != 2 && isCreate" @click="create" class="btn">创建培训</view>
		<view v-if="!sign_url && !isCreate" @click="goBack" class="btn">返回上级</view>
	</view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue"
import uniIcons from "@/components/uni-icons/uni-icons.vue";
var content = null;
var touchs = [];
var _that;
export default{
	components: { uniPopup,uniIcons },
	data(){
		return {
			isShowSign: false,
			userId: uni.getStorageSync('userid'),
			isCreate: false,
			sign_url: '',
			tmp_sign_url: '',
			form: {}
		}
	},
	onLoad(option){
		_that = this
		if(option.type && option.type == 'create') this.isCreate = true;
		
		//获得Canvas的上下文
		content = wx.createCanvasContext('firstCanvas');
		//设置线的颜色
		content.setStrokeStyle("#000");
		//设置线的宽度
		content.setLineWidth(5);
		//设置线两端端点样式更加圆润
		content.setLineCap('round');
		//设置两条线连接处更加圆润
		content.setLineJoin('round');
		
		// 获取详情数据
		this.form = uni.getStorageSync('eduPreTrainDetail');
		
		if(this.form.content) this.form.content = JSON.parse(this.form.content);
		
		if(this.form.study_man) this.form.study_man = JSON.parse(this.form.study_man);
		console.log(this.form.study_man)
	},
	onBackPress(){
		// 处理签名弹窗问题
		if(this.isShowSign){
			this.hideSign();
			return true;
		}
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toPage(url){
			if(url) uni.navigateTo({url});
		},
		// 创建培训
		create(){
			uni.showLoading({title: '加载中'});
			uni.request({
				method: 'POST',
				url: this.$API.eduPreTrainCreate,
				data: {
					userid: this.userId,
					study_id: this.form.id
				},
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: res.data.message
					});
					if(res.data.code == 0){
						uni.navigateBack();
					}
				},
				fail:()=>{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '操作失败'
					});
				}
			})
		},
		// 完成学习
		finish(){
			uni.showLoading({title: '加载中'});
			uni.request({
				method: 'POST',
				url: this.$API.eduPreTrainSign,
				data: {
					userid: this.userId,
					study_id: this.form.id,
					sign_url: this.tmp_sign_url
				},
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: res.data.message
					});
					if(res.data.code == 0){
						uni.navigateBack();
					}
				},
				fail:()=>{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '操作失败'
					});
				}
			})
		},
		// 打开签名
		showSign(){
			this.$refs.popup.open();
			this.isShowSign = true;
		},
		// 关闭签名
		hideSign(){
			this.$refs.popup.close();
			this.isShowSign = false;
			this.clearClick();
		},
		// 切换弹窗
		toggleSign(e){
			this.isShowSign = e.show;
			if(!e.show) this.clearClick();
		},
		// 上传签名
		uploadSign(filePath){
			let _this = this;
			uni.showLoading({title: '上传中'})
			uni.uploadFile({
				url: this.$API.upload,
				name: 'file',
				filePath: filePath,
				success: function(res) {
					uni.hideLoading();
					res.data = JSON.parse(res.data);
					_this.tmp_sign_url = res.data.fileName;
					_this.sign_url =  _this.$API.baseURL + res.data.fileName;
					_this.hideSign();
				},
				fail: ()=>{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '上传失败'
					})
				}
			});
		},
		// 签名完成
		overSign: function() {
			let _this = this;
			if (this.isEnd) {
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {
						_this.uploadSign(res.tempFilePath);
					}
				})
			} else {
				uni.showToast({
					title: '请先完成签名',
					icon: "none",
					duration: 1500,
					mask: true
				})
			}
		
		},
		// 画布的触摸移动开始手势响应
		start: function(event) {
			//获取触摸开始的 x,y
			let point = {
				x: event.changedTouches[0].x,
				y: event.changedTouches[0].y
			}
			touchs.push(point);
		},
		// 画布的触摸移动手势响应
		move: function(e) {
			let point = {
				x: e.touches[0].x,
				y: e.touches[0].y
			}
			touchs.push(point)
			if (touchs.length >= 2) {
				this.draw(touchs)
			}
		},
		// 画布的触摸移动结束手势响应
		end: function(e) {
			// 设置为已经签名
			this.isEnd = true
			// 清空轨迹数组
			for (let i = 0; i < touchs.length; i++) {
				touchs.pop()
			}
		},
		// 画布的触摸取消响应
		cancel: function(e) {
			console.log("触摸取消" + e)
		},
		// 画布的长按手势响应
		tap: function(e) {
			console.log("长按手势" + e)
		},
		error: function(e) {
			console.log("画布触摸错误" + e)
		},
		//绘制
		draw: function(touchs) {
			let point1 = touchs[0]
			let point2 = touchs[1]
			touchs.shift()
			content.moveTo(point1.x, point1.y)
			content.lineTo(point2.x, point2.y)
			content.stroke()
			content.draw(true)
		},
		//清除操作
		clearClick: function() {
			this.isEnd = false
			
			// 获取设备宽度
			uni.getSystemInfo({
				success: function(res) {
					content.clearRect(0, 0, res.windowWidth, 200);
				}
			});
			content.draw(true)
		},
	}
}
</script>

<style scoped>
.container{
	padding-top: 20upx;
}
.require{
	color: red;
	margin-left: 10upx;
}

.sign-image{
	width: 100%;
	height: 300upx;
	background: #F2F2F2;
}

/*签名弹窗*/
.popup-outter{
	background: #fff;
	padding: 10upx;
}
.popup-inner{
	background: #BFE9FF;
	border-radius: 10upx;
	padding: 0 20upx 20upx;
}
.popup-title{
	height: 80upx;
	line-height: 80upx;
	font-size: 32upx;
	text-align: center;
	position: relative;
}
.popup-title view{
	position: absolute;
	top: 14upx;
	right: 0;
}
.popup-title view image{
	width: 40upx;
	height: 40upx;
	margin-right: 8upx;
}
.popup-inner canvas{
	width: 100%;
	height: 400upx;
	background: #F0F0F0;
	border-radius: 10upx;
}
.popup-inner .btns{
	height: 100upx;
	line-height: 100upx;
	margin-top: 10upx;
	justify-content: center;
}
.popup-inner .btns view{
	background: #fff;
	border-radius: 10upx;
	padding: 10upx 60upx;
	box-shadow: 0 4upx 6upx #999;
}
.popup-inner .btns view:first-child{
	margin-right: 60upx;
}

/*卡片*/
.card{
	background: #fff;
	margin: 0 20upx 20upx;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .card{
	margin: 0 0 16upx;
	justify-content: flex-start;
}
.card .card.list{
	padding: 20upx 30upx;
}
.card .card.list .order{
	font-weight: bold;
	font-size: 32upx;
	margin-right: 20upx;
}
.card .card.list .content{
	font-size: 26upx;
}
.card .card.member{
	padding: 8upx 10upx;
	background: #F2F2F2;
	box-shadow: none;
}
.card .title view{
	font-size: 28upx;
	margin-top: 12upx;
}
.card .title view.name{
	font-size: 36upx;
}
.card .item text{
	color: #41A4E8;
}
.card .item.btns{
	margin-bottom: 16upx;
	padding-top: 10upx;
	justify-content: flex-start;
}
.btn{
	color: #fff;
	width: 200upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	margin: 40upx auto;
	background-color: red;
}
</style>
